<template>
  <div class="page-container">
    <!-- 筛选区卡片 -->
    <div class="filter-card">
      <el-form :inline="true" :model="searchForm" class="filter-form">
        <el-form-item label="通知单编号">
          <el-input v-model="searchForm.shipmentsCode" placeholder="请输入通知单编号" />
        </el-form-item>
        <el-form-item label="通知单名称">
          <el-input v-model="searchForm.shipmentsName" placeholder="请输入通知单名称" />
        </el-form-item>
        <el-form-item label="销售订单编号">
          <el-input v-model="searchForm.saleCode" placeholder="请输入销售订单编号" />
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="searchForm.custCode" placeholder="请输入客户编码" />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="searchForm.custName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="客户简称">
          <el-input v-model="searchForm.custAbbreviation" placeholder="请输入客户简称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区 -->
    <div class="operation-area">
      <el-button type="primary" :icon="Plus" @click="onAdd">新增</el-button>
      <el-button type="success" :icon="Edit" @click="onEditSelected">修改</el-button>
      <el-button type="danger" :icon="Delete" @click="onDeleteSelected">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="shipmentsCode" label="通知单编号" width="150" />
      <el-table-column prop="shipmentsName" label="通知单名称" width="180" />
      <el-table-column prop="saleCode" label="销售订单编号" width="150" />
      <el-table-column prop="custName" label="客户名称" width="180" />
      <el-table-column prop="shipmentsTime" label="发货日期" width="120" />
      <el-table-column prop="receivingName" label="收货人" width="100" />
      <el-table-column prop="phone" label="联系方式" width="120" />
      <el-table-column prop="receivingAddress" label="收货地址" width="200" />
      <el-table-column prop="state" label="单据状态" width="100">
        <template #default="{ row }">
          <span>{{ statusText(row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="{ row }">
          <div class="table-action-btns">
            <template v-if="row.state === 1">
              <el-button type="primary" size="small" @click="onEdit(row)">编辑</el-button>
              <el-button type="danger" size="small" @click="onDelete(row)">删除</el-button>
            </template>
            <template v-else-if="row.state === 2">
              <el-button type="success" size="small">执行发货</el-button>
            </template>
            <template v-else-if="row.state === 3">
              <el-button type="info" size="small">取消</el-button>
            </template>
            <!-- 已发货和已取消不显示任何按钮 -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 16px 0; text-align: right;">
      <el-pagination
        :current-page="pagination.pageIndex"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
      />
    </div>

    <!-- 新增发货通知单弹窗 -->
    <el-dialog 
      v-model="addDialogVisible" 
      :title="isEdit ? '编辑发货通知单' : '添加发货通知单'" 
      width="900px"
      :close-on-click-modal="false"
      destroy-on-close
      class="custom-dialog"
    >
      <div class="dialog-content">
        <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px" class="dialog-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="通知单编号" prop="shipmentsCode" required>
                <div class="code-input-container">
                  <el-input v-model="formData.shipmentsCode" :disabled="formData.autoGenerate || isEdit" placeholder="请输入通知单编号" />
                  <el-switch
                    v-if="!isEdit"
                    v-model="formData.autoGenerate"
                    class="auto-generate"
                    active-text="自动生成"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通知单名称" prop="shipmentsName" required>
                <el-input v-model="formData.shipmentsName" placeholder="请输入通知单名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售订单号" prop="saleCode">
                <div class="input-with-icon">
                  <el-input v-model="formData.saleCode" placeholder="请选择销售订单号" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户编码" prop="custCode" required>
                <div class="input-with-icon">
                  <el-input v-model="formData.custCode" placeholder="请选择客户编码" />
                  <el-button icon="Search" class="search-btn" circle @click="openCustomerDialog"></el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="custName" required>
                <el-input v-model="formData.custName" disabled placeholder="客户名称自动填充" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户简称" prop="custAbbreviation">
                <el-input v-model="formData.custAbbreviation" disabled placeholder="客户简称自动填充" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发货日期" prop="shipmentsTime" required>
                <el-date-picker v-model="formData.shipmentsTime" type="date" placeholder="请选择发货日期" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货人" prop="receivingName" required>
                <el-input v-model="formData.receivingName" placeholder="请输入收货人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone" required>
                <el-input v-model="formData.phone" placeholder="请输入联系方式" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货地址" prop="receivingAddress" required>
                <el-input v-model="formData.receivingAddress" placeholder="请输入收货地址" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="formData.speak" type="textarea" placeholder="请输入内容" rows="4" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 客户选择弹窗 -->
    <el-dialog
      v-model="customerDialogVisible"
      title="客户选择"
      width="1200px"
      top="5vh"
      :close-on-click-modal="false"
      destroy-on-close
      class="custom-dialog"
    >
      <div class="dialog-header">
        客户选择
      </div>
      
      <div class="customer-search-area">
        <el-form :inline="true" :model="customerSearchForm" class="filter-form">
          <el-form-item label="客户编码">
            <el-input v-model="customerSearchForm.custCode" placeholder="请输入客户编码" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="customerSearchForm.custName" placeholder="请输入客户名称" />
          </el-form-item>
          <el-form-item label="客户简称">
            <el-input v-model="customerSearchForm.custAbbreviation" placeholder="请输入客户简称" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-select v-model="customerSearchForm.isEnabled" placeholder="是否启用">
              <el-option label="全部" value="" />
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchCustomers">搜索</el-button>
            <el-button @click="resetCustomerSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="customer-table-wrapper">
        <el-table
          :data="customerTableData"
          border
          height="400px"
          @row-click="handleCustomerRowClick"
          highlight-current-row
          class="custom-table">
          <el-table-column
            type="radio"
            width="50">
            <template #default="scope">
              <el-radio v-model="selectedCustomerId" :label="scope.row.custId">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="custCode"
            label="客户编码"
            min-width="180"
            align="center" />
          <el-table-column
            prop="custName"
            label="客户名称"
            min-width="300"
            align="center" />
          <el-table-column
            prop="custAbbreviation"
            label="客户简称"
            min-width="200"
            align="center" />
          <el-table-column
            prop="custPhone"
            label="联系电话"
            min-width="200"
            align="center" />
          <el-table-column
            prop="isEnabled"
            label="是否启用"
            min-width="120"
            align="center">
            <template #default="scope">
              <el-tag 
                size="small"
                :type="scope.row.isEnabled === 1 ? 'success' : 'danger'">
                {{ scope.row.isEnabled === 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="customer-pagination-area">
          <span class="total-count">共 {{ customerPagination.total }} 条</span>
          <el-pagination
            @size-change="handleCustomerSizeChange"
            @current-change="handleCustomerPageChange"
            v-model:current-page="customerPagination.pageIndex"
            v-model:page-size="customerPagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="sizes, prev, pager, next, jumper"
            :total="customerPagination.total" />
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="customerDialogVisible = false" class="footer-btn cancel-btn">取 消</el-button>
          <el-button type="primary" @click="confirmCustomerSelect" class="footer-btn save-btn">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { Plus, Edit, Delete, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/api/http'

// 定义发货通知单数据类型接口
interface ShipmentsModelItem {
  id: number
  shipmentsCode: string
  shipmentsName: string
  saleCode: string
  custCode: string
  custName: string
  custAbbreviation: string
  shipmentsTime: string
  receivingName: string
  phone: string
  receivingAddress: string
  speak?: string
  state: number
  [key: string]: any
}

const searchForm = ref({
  shipmentsCode: '',
  shipmentsName: '',
  saleCode: '',
  custCode: '',
  custName: '',
  custAbbreviation: ''
})

const tableData = ref<ShipmentsModelItem[]>([])
const pagination = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

// 表格选中行
const selectedRows = ref<ShipmentsModelItem[]>([])

// 表格选中行变化
function handleSelectionChange(rows: ShipmentsModelItem[]) {
  selectedRows.value = rows
}

// 获取表格数据
const getTableData = async () => {
  try {
    const params = {
      pageIndex: pagination.value.pageIndex,
      pageSize: pagination.value.pageSize,
      shipmentsCode: searchForm.value.shipmentsCode || null,
      shipmentsName: searchForm.value.shipmentsName || null,
      saleCode: searchForm.value.saleCode || null,
      custCode: searchForm.value.custCode || null,
      custName: searchForm.value.custName || null,
      custAbbreviation: searchForm.value.custAbbreviation || null
    }
    
    const response = await http.post('/api/ShipmentsModel/GetShipmentsModel', params)
    console.log('获取数据响应:', response)
    tableData.value = response.rows || []
    pagination.value.total = response.total || 0
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败，请检查网络连接')
  }
}

function onSearch() {
  pagination.value.pageIndex = 1
  getTableData()
}

function onReset() {
  searchForm.value = {
    shipmentsCode: '',
    shipmentsName: '',
    saleCode: '',
    custCode: '',
    custName: '',
    custAbbreviation: ''
  }
  pagination.value.pageIndex = 1
  getTableData()
}

function handleCurrentChange(page: number) {
  pagination.value.pageIndex = page
  getTableData()
}

const statusText = (val: number) => {
  switch(val) {
    case 1: return '草稿'
    case 2: return '待出货'
    case 3: return '已出货'
    case 4: return '已取消'
    default: return ''
  }
}

// 表单相关
const addDialogVisible = ref(false)
const formRef = ref()
const isEdit = ref(false)
const formData = ref({
  id: 0,
  shipmentsCode: '',
  autoGenerate: false,
  shipmentsName: '',
  saleCode: '',
  custCode: '',
  custName: '',
  custAbbreviation: '',
  shipmentsTime: '',
  receivingName: '',
  phone: '',
  receivingAddress: '',
  speak: '',
  state: 1
})

const formRules = {
  shipmentsCode: [{ required: true, message: '请输入通知单编号', trigger: 'blur' }],
  shipmentsName: [{ required: true, message: '请输入通知单名称', trigger: 'blur' }],
  custCode: [{ required: true, message: '请选择客户编码', trigger: 'change' }],
  custName: [{ required: true, message: '客户名称不能为空', trigger: 'change' }],
  shipmentsTime: [{ required: true, message: '请选择发货日期', trigger: 'change' }],
  receivingName: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  receivingAddress: [{ required: true, message: '请输入收货地址', trigger: 'blur' }]
}

function onAdd() {
  isEdit.value = false
  addDialogVisible.value = true
  // 清空表单
  formData.value = {
    id: 0,
    shipmentsCode: '',
    autoGenerate: false,
    shipmentsName: '',
    saleCode: '',
    custCode: '',
    custName: '',
    custAbbreviation: '',
    shipmentsTime: '',
    receivingName: '',
    phone: '',
    receivingAddress: '',
    speak: '',
    state: 1
  }
}

// 监听自动生成勾选状态
watch(() => formData.value.autoGenerate, (newVal) => {
  if (newVal) {
    // 自动生成编号：SN + 年月日时分秒
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    
    formData.value.shipmentsCode = `SN${year}${month}${day}${hours}${minutes}${seconds}`
  } else {
    // 关闭自动生成时，清空编号
    formData.value.shipmentsCode = ''
  }
})

// 打开编辑弹窗并填充数据
function onEdit(row: ShipmentsModelItem) {
  isEdit.value = true
  addDialogVisible.value = true
  // 填充表单数据
  formData.value = {
    id: row.id,
    shipmentsCode: row.shipmentsCode,
    autoGenerate: false,
    shipmentsName: row.shipmentsName,
    saleCode: row.saleCode || '',
    custCode: row.custCode,
    custName: row.custName,
    custAbbreviation: row.custAbbreviation || '',
    shipmentsTime: row.shipmentsTime,
    receivingName: row.receivingName,
    phone: row.phone,
    receivingAddress: row.receivingAddress,
    speak: row.speak || '',
    state: row.state
  }
}

// 点击上方修改按钮
function onEditSelected() {
  if (selectedRows.value.length !== 1) {
    ElMessage.warning('请选择一条记录进行修改')
    return
  }
  
  const row = selectedRows.value[0]
  // 只有草稿状态可以编辑
  if (row.state !== 1) {
    ElMessage.warning('只有草稿状态的记录可以修改')
    return
  }
  
  onEdit(row)
}

// 删除单条记录
async function onDelete(row: ShipmentsModelItem) {
  // 确认删除
  try {
    await ElMessageBox.confirm('确定要删除该发货通知单吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    console.log(row.shipmentsCode)
    // 调用删除接口
    try {
      const url = `/api/ShipmentsModel/RemShipmentsModel?shipmentsCode=${encodeURIComponent(row.shipmentsCode)}`
      console.log('请求URL:', url)
      
      const response = await http.post(url)
      console.log('删除接口响应:', response)
      
      ElMessage.success('删除成功')
      getTableData() // 刷新表格
    } catch (deleteError) {
      console.error('删除接口调用失败:', deleteError)
      ElMessage.error('删除失败，请检查网络或联系管理员')
    }
  } catch (error) {
    // 用户取消删除
    if (error !== 'cancel') {
      console.error('删除操作失败', error)
    }
  }
}

// 批量删除选中记录
async function onDeleteSelected() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  
  // 检查是否有非草稿状态的记录
  const nonDraftRecords = selectedRows.value.filter(row => row.state !== 1)
  if (nonDraftRecords.length > 0) {
    ElMessage.warning('只能删除草稿状态的记录')
    return
  }
  
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条记录吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 获取所有选中记录的通知单编号
    const shipmentsCodes = selectedRows.value.map(row => row.shipmentsCode)
    
    // 逐个调用删除接口
    for (const code of shipmentsCodes) {
      console.log('批量删除编号:', code)
      try {
        const url = `/api/ShipmentsModel/RemShipmentsModel?shipmentsCode=${encodeURIComponent(code)}`
        console.log('请求URL:', url)
        
        await http.post(url)
      } catch (err) {
        console.error(`删除编号 ${code} 失败:`, err)
      }
    }
    
    ElMessage.success('删除成功')
    getTableData() // 刷新表格
  } catch (error) {
    // 用户取消删除
    if (error !== 'cancel') {
      console.error('删除失败', error)
    }
  }
}

// 提交表单
async function onSubmit() {
  try {
    await formRef.value.validate()
    
    if (isEdit.value) {
      // 编辑模式 - 调用更新接口
      await http.post('/api/ShipmentsModel/UpdShipmentsModel', formData.value)
      ElMessage.success('更新成功')
    } else {
      // 新增模式 - 调用添加接口
      await http.post('/api/ShipmentsModel/AddShipmentsModel', formData.value)
      ElMessage.success('添加成功')
    }
    
    addDialogVisible.value = false
    getTableData() // 刷新表格
  } catch (error) {
    console.error('表单验证或提交失败', error)
  }
}

// 客户选择相关
const customerDialogVisible = ref(false)
const customerSearchForm = ref({
  custCode: '',
  custName: '',
  custAbbreviation: '',
  isEnabled: ''
})
const customerTableData = ref<any[]>([])
const customerPagination = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})
const selectedCustomerId = ref('')
const selectedCustomer = ref<any>(null)

// 打开客户选择对话框
function openCustomerDialog() {
  customerDialogVisible.value = true
  selectedCustomerId.value = ''
  selectedCustomer.value = null
  getCustomerList()
}

// 获取客户列表
async function getCustomerList() {
  const params = {
    pageIndex: customerPagination.value.pageIndex,
    pageSize: customerPagination.value.pageSize,
    custCode: customerSearchForm.value.custCode || null,
    custName: customerSearchForm.value.custName || null,
    custAbbreviation: customerSearchForm.value.custAbbreviation || null,
    isEnabled: customerSearchForm.value.isEnabled || null
  }
  
  try {
    const response = await http.post('/api/GetCustomer/GetCustomer', params)
    console.log('客户查询响应:', response)
    
    // 调整数据获取方式，使用rows和total字段
    customerTableData.value = response.rows || []
    customerPagination.value.total = response.total || 0
  } catch (error) {
    console.error('获取客户列表失败', error)
    ElMessage.error('获取客户列表失败')
  }
}

// 搜索客户
function searchCustomers() {
  customerPagination.value.pageIndex = 1
  getCustomerList()
}

// 重置客户搜索条件
function resetCustomerSearch() {
  customerSearchForm.value = {
    custCode: '',
    custName: '',
    custAbbreviation: '',
    isEnabled: ''
  }
  customerPagination.value.pageIndex = 1
  getCustomerList()
}

// 处理客户分页大小变化
function handleCustomerSizeChange(val: number) {
  customerPagination.value.pageSize = val
  getCustomerList()
}

// 处理客户分页变化
function handleCustomerPageChange(page: number) {
  customerPagination.value.pageIndex = page
  getCustomerList()
}

// 处理客户表格行点击
function handleCustomerRowClick(row: any) {
  selectedCustomerId.value = row.id
  selectedCustomer.value = row
}

// 确认客户选择
function confirmCustomerSelect() {
  if (!selectedCustomer.value) {
    ElMessage.warning('请选择一个客户')
    return
  }
  
  // 填充客户信息到表单
  formData.value.custCode = selectedCustomer.value.custCode
  formData.value.custName = selectedCustomer.value.custName
  formData.value.custAbbreviation = selectedCustomer.value.custAbbreviation || ''
  
  // 如果有联系人信息，也可以填充
  if (selectedCustomer.value.contactPerson) {
    formData.value.receivingName = selectedCustomer.value.contactPerson
  }
  if (selectedCustomer.value.address) {
    formData.value.receivingAddress = selectedCustomer.value.address
  }
  
  customerDialogVisible.value = false
  ElMessage.success('客户信息已填充')
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped>
.page-container {
  padding-left: 32px;
  padding-right: 16px;
  padding-top: 8px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
.filter-card {
  background: #f5f7fa;
  padding: 24px 24px 0 24px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.filter-form {
  margin-bottom: 0;
}
.operation-area {
  margin: 16px 0 16px 0;
}
.table-action-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

/* 弹窗样式 */
:deep(.custom-dialog .el-dialog) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 15px 20px;
  margin: 0;
  border-bottom: 1px solid #e4e7ed;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 10px 20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}

.dialog-form .el-form-item {
  margin-bottom: 18px;
}

.code-input-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.auto-generate {
  margin-left: 10px;
  white-space: nowrap;
}

.input-with-icon {
  display: flex;
  align-items: center;
  width: 100%;
}

.search-btn {
  margin-left: 5px;
  padding: 5px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-form-item.is-required .el-form-item__label:before) {
  color: #f56c6c;
}

.dialog-footer {
  text-align: right;
}

/* 客户选择对话框样式 */
.dialog-header {
  padding: 16px 20px;
  background-color: #409eff;
  color: white;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  position: relative;
}

.customer-search-area {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.customer-table-wrapper {
  margin-top: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.custom-table {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

.custom-table :deep(th) {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
}

.customer-pagination-area {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
}

.total-count {
  font-size: 14px;
  color: #606266;
}

.footer-btn {
  padding: 10px 32px;
  border-radius: 4px;
  font-size: 14px;
}

.cancel-btn {
  border: 1px solid #dcdfe6;
  color: #606266;
  background: white;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.save-btn {
  background: linear-gradient(135deg, #3a8ffe 0%, #3d7afd 100%);
  border: none;
}

.save-btn:hover {
  background: linear-gradient(135deg, #5da1ff 0%, #5389fc 100%);
}
</style>